<template>
  <div class="hello">
    <div id="chooesout">
      <div id="choose">
        <div class="one">
          <img v-bind:src= 'pic' />
         
        </div>
        <div class="two">
          &nbsp;&nbsp;&nbsp;&nbsp;{{ one }}
          <p />
          <!-- {{item.time | dateFmt(‘YYYY-MM-DD HH:mm:ss‘)}} -->
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;上映时间：<font size="3">{{
            two | dateFmt("YYYY-MM-DD")
          }}</font>
          <p />
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;票价：<font size="3">{{ three }}</font>
          <p />
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;电影简介：<font size="3">{{
            fore
          }}</font>
          <p />
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;参演人员： &nbsp;&nbsp;<font size="5">导演：</font><font size="3">{{
            fore1
          }}</font
          >&nbsp;&nbsp;<font size="5">主要演职人员：</font><font size="3">{{ fore2 }}</font
          >&nbsp;&nbsp;&nbsp;<font size="3">{{ fore3 }}</font
          >&nbsp;&nbsp;&nbsp;<font size="3">{{ fore4 }}</font>
          <div class="details">
            <el-row>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-button
                type="danger"
                value=""
                @click="buy(mid,uname)"
                >{{ five }}</el-button
              >
            </el-row>
          </div>
        </div>
      </div>
    </div>
    <div id="hot">
      <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ hot }}</div>
      <div id="pingjia">
        <div v-clickoutside="hideReplyBtn" @click="inputFocus" class="my-reply">
          <el-avatar class="header-img" :size="40" :src="myHeader"></el-avatar>
          <!-- reply-info -->
          <div class="my-reply">
            <div
              tabindex="0"
              contenteditable="true"
              id="replyInput"
              spellcheck="false"
              placeholder="输入评论..."
              class="reply-input"
              @focus="showReplyBtn"
              @input="onDivInput($event)"
            ></div>
          </div>
          <!-- reply-btn-box -->
          <div class="my-reply" v-show="btnShow">
            <el-button
              class="reply-btn"
              size="medium"
              @click="sendComment"
              type="primary"
              >发表评论</el-button
            >
          </div>
        </div>
        <div
          v-for="(item, i) in comments"
          :key="i"
          class="author-title reply-father"
        >
          <el-avatar
            class="header-img"
            :size="40"
            :src="item.headImg"
          ></el-avatar>
          <!-- author-info -->
          <div class="my-reply">
            <span class="author-name">{{ item.name }}</span>
            <span class="author-time">{{ item.time }}</span>
          </div>
          <!-- icon-btn -->
          <div class="my-reply">
            <span @click="showReplyInput(i, item.name, item.id)"
              ><i class="iconfont el-icon-s-comment"></i
              >{{ item.commentNum }}</span
            >
            <i class="iconfont el-icon-caret-top"></i>{{ item.like }}
          </div>
          <!-- talk-box -->
          <div class="my-reply">
            <p>
              <span class="reply">{{ item.comment }}</span>
            </p>
          </div>
          <!-- reply-box -->
          <div class="my-reply">
            <div v-for="(reply, j) in item.reply" :key="j" class="author-title">
              <el-avatar
                class="header-img"
                :size="40"
                :src="reply.fromHeadImg"
              ></el-avatar>
              <!-- author-info -->
              <div class="my-reply">
                <span class="author-name">{{ reply.from }}</span>
                <span class="author-time">{{ reply.time }}</span>
              </div>
              <!-- icon-btn -->
              <div class="my-reply">
                <span @click="showReplyInput(i, reply.from, reply.id)"
                  ><i class="iconfont el-icon-s-comment"></i
                  >{{ reply.commentNum }}</span
                >
                <i class="iconfont el-icon-caret-top"></i>{{ reply.like }}
              </div>
              <!-- talk-box -->
              <div class="my-reply">
                <p>
                  <span>回复 {{ reply.to }}:</span>
                  <span class="reply">{{ reply.comment }}</span>
                </p>
              </div>
              <!-- reply-box -->
              <div class="my-reply"></div>
            </div>
          </div>
          <!-- my-reply my-comment-reply -->
          <div v-show="_inputShow(i)" class="my-reply">
            <el-avatar
              class="header-img"
              :size="40"
              :src="myHeader"
            ></el-avatar>
            <!-- reply-info -->
            <div class="my-reply">
              <div
                tabindex="0"
                contenteditable="true"
                spellcheck="false"
                placeholder="输入评论..."
                @input="onDivInput($event)"
                class="reply-input reply-comment-input"
              ></div>
            </div>
            <!-- reply-btn-box -->
            <div class="my-reply">
              <el-button
                class="reply-btn"
                size="medium"
                @click="sendCommentReply(i, j)"
                type="primary"
                >发表评论</el-button
              >
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <img src="../assets/backright.png" />
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
const clickoutside = {
  // 初始化指令
  bind(el, binding, vnode) {
    function documentHandler(e) {
      // 这里判断点击的元素是否是本身，是本身，则返回
      if (el.contains(e.target)) {
        return false;
      }
      // 判断指令中是否绑定了函数
      if (binding.expression) {
        // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
        binding.value(e);
      }
    }
    // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
    el.vueClickOutside = documentHandler;
    document.addEventListener("click", documentHandler);
  },
  update() {},
  unbind(el, binding) {
    // 解除事件监听
    document.removeEventListener("click", el.vueClickOutside);
    delete el.vueClickOutside;
  },
};
export default {
  name: "ArticleComment",
  data() {
    return {
      uname:'',
      title: "正在热映",
      one: [],
      two: [],
      three: [],
      fore: [],
      fore1: [],
      fore2: [],
      fore3: [],
      fore4: [],
      pic:[],
      mid:[],
      five: "特惠购票",
      hot: "热门短评:",
      btnShow: false,
      index: "0",
      replyComment: "",
      myName: "Lana Del Rey",
      myHeader:
        "https://ae01.alicdn.com/kf/Hd60a3f7c06fd47ae85624badd32ce54dv.jpg",
      myId: 19870621,
      to: "",
      toId: -1,
      comments: [
        {
          name: "Lana Del Rey",
          id: 19870621,
          headImg:
            "https://ae01.alicdn.com/kf/Hd60a3f7c06fd47ae85624badd32ce54dv.jpg",
          comment: "我发布一张新专辑Norman Fucking Rockwell,大家快来听啊",
          time: "2019年9月16日 18:43",
          commentNum: 2,
          like: 15,
          inputShow: false,
          reply: [
            {
              from: "Taylor Swift",
              fromId: 19891221,
              fromHeadImg:
                "https://ae01.alicdn.com/kf/H94c78935ffa64e7e977544d19ecebf06L.jpg",
              to: "Lana Del Rey",
              toId: 19870621,
              comment: "我很喜欢你的新专辑！！",
              time: "2019年9月16日 18:43",
              commentNum: 1,
              like: 15,
              inputShow: false,
            },
            {
              from: "Ariana Grande",
              fromId: 1123,
              fromHeadImg:
                "https://ae01.alicdn.com/kf/Hf6c0b4a7428b4edf866a9fbab75568e6U.jpg",
              to: "Lana Del Rey",
              toId: 19870621,
              comment: "别忘记宣传我们的合作单曲啊",
              time: "2019年9月16日 18:43",
              commentNum: 0,
              like: 5,
              inputShow: false,
            },
          ],
        },
        {
          name: "Taylor Swift",
          id: 19891221,
          headImg:
            "https://ae01.alicdn.com/kf/H94c78935ffa64e7e977544d19ecebf06L.jpg",
          comment: "我发行了我的新专辑Lover",
          time: "2019年9月16日 18:43",
          commentNum: 1,
          like: 5,
          inputShow: false,
          reply: [
            {
              from: "Lana Del Rey",
              fromId: 19870621,
              fromHeadImg:
                "https://ae01.alicdn.com/kf/Hd60a3f7c06fd47ae85624badd32ce54dv.jpg",
              to: "Taylor Swift",
              toId: 19891221,
              comment: "新专辑和speak now 一样棒！",
              time: "2019年9月16日 18:43",
              commentNum: 25,
              like: 5,
              inputShow: false,
            },
          ],
        },
        {
          name: "Norman Fucking Rockwell",
          id: 20190830,
          headImg:
            "https://ae01.alicdn.com/kf/Hdd856ae4c81545d2b51fa0c209f7aa28Z.jpg",
          comment: "Plz buy Norman Fucking Rockwell on everywhere",
          time: "2019年9月16日 18:43",
          commentNum: 0,
          like: 5,
          inputShow: false,
          reply: [],
        },
      ],
    };
  },
  directives: { clickoutside },
  methods: {
    inputFocus() {
      var replyInput = document.getElementById("replyInput");
      replyInput.style.padding = "8px 8px";
      replyInput.style.border = "2px solid blue";
      replyInput.focus();
    },
    showReplyBtn() {
      this.btnShow = true;
    },
    hideReplyBtn() {
      this.btnShow = false;
      replyInput.style.padding = "10px";
      replyInput.style.border = "none";
    },
    showReplyInput(i, name, id) {
      this.comments[this.index].inputShow = false;
      this.index = i;
      this.comments[i].inputShow = true;
      this.to = name;
      this.toId = id;
    },
    _inputShow(i) {
      return this.comments[i].inputShow;
    },
    sendComment() {
      if (!this.replyComment) {
        this.$message({
          showClose: true,
          type: "warning",
          message: "评论不能为空",
        });
      } else {
        let a = {};
        let input = document.getElementById("replyInput");
        let timeNow = new Date().getTime();
        let time = this.dateStr(timeNow);
        a.name = this.myName;
        a.comment = this.replyComment;
        a.headImg = this.myHeader;
        a.time = time;
        a.commentNum = 0;
        a.like = 0;
        this.comments.push(a);
        this.replyComment = "";
        input.innerHTML = "";
      }
    },
    sendCommentReply(i, j) {
      if (!this.replyComment) {
        this.$message({
          showClose: true,
          type: "warning",
          message: "评论不能为空",
        });
      } else {
        let a = {};
        let timeNow = new Date().getTime();
        let time = this.dateStr(timeNow);
        a.from = this.myName;
        a.to = this.to;
        a.fromHeadImg = this.myHeader;
        a.comment = this.replyComment;
        a.time = time;
        a.commentNum = 0;
        a.like = 0;
        this.comments[i].reply.push(a);
        this.replyComment = "";
        document.getElementsByClassName("reply-comment-input")[i].innerHTML =
          "";
      }
    },
    onDivInput: function (e) {
      this.replyComment = e.target.innerHTML;
    },
    dateStr(date) {
      //获取js 时间戳
      var time = new Date().getTime();
      //去掉 js 时间戳后三位，与php 时间戳保持一致
      time = parseInt((time - date) / 1000);
      //存储转换值
      var s;
      if (time < 60 * 10) {
        //十分钟内
        return "刚刚";
      } else if (time < 60 * 60 && time >= 60 * 10) {
        //超过十分钟少于1小时
        s = Math.floor(time / 60);
        return s + "分钟前";
      } else if (time < 60 * 60 * 24 && time >= 60 * 60) {
        //超过1小时少于24小时
        s = Math.floor(time / 60 / 60);
        return s + "小时前";
      } else if (time < 60 * 60 * 24 * 30 && time >= 60 * 60 * 24) {
        //超过1天少于30天内
        s = Math.floor(time / 60 / 60 / 24);
        return s + "天前";
      } else {
        //超过30天ddd
        var date = new Date(parseInt(date));
        return (
          date.getFullYear() +
          "/" +
          (date.getMonth() + 1) +
          "/" +
          date.getDate()
        );
      }
    },
    // function (x) 
    getOneById: function (mid) {
      // "api/movie/selectOne?mid="+x
      axios.get("api/movie/selectOne?mid="+mid).then((res) => {
        //  alert(res.data);
        // console.log(res.data);
        this.one = res.data.mname;
        this.two = res.data.mtime;
        this.three = res.data.mprice;
        this.fore = res.data.mdesc;
        this.fore1 = res.data.mactor1;
        this.fore2 = res.data.mactor2;
        this.fore3 = res.data.mactor3;
        this.fore4 = res.data.mactor4;
        this.pic=res.data.mpic;
        this.mid=res.data.mid;
      });
    },
    buy(mid,uname){
      // alert(mid);
      // alert(uname)
      // this.$route.push();
      // var uname=this.$route.params.uname;
      // alert(uname);
      this.$router.push({ name: "moviehall", params: { mid: mid,uname: uname}});
    },
    getuname(un){
        this.uname=un
        // alert(this.uname)
    }
  },
  mounted() {
    // this.$routre.params.mid
    // alert(this.$route.params.uname)
    this.getuname(this.$route.params.uname)
    this.getOneById(this.$route.params.mid);
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* #chooseout {
  width: auto;
  height: 360px;
} */
#choose {
  /* margin-top: 40px; */
  /* margin-left: 190px; */
  width: auto;
  height: 395px;
  /* border: solid red 1px; */

  background: url("../assets/backg.png") no-repeat;
  /* background-position: center; */
  /* height: 100%;
  width: 100%;
  background-size: cover; */
  /* position: fixed; */
}
.one {
  width: 230px;
  height: 326px;
  /* border: red solid 1px; */
  float: left;

  margin-left: 190px;
  margin-top: 69px;
}
.one img {
  width: 230px;
  height: 326px;
}

.two {
  width: 1150px;
  height: 326px;
  /* border: red solid 1px; */
  float: left;

  /* margin-left: 190px; */
  margin-top: 30px;

  text-align: left;
  font-size: 25px;
  -webkit-text-fill-color: white;
}
#hot {
  text-align: left;
  font-size: 25px;
}

#pingjia {
  /* border: yellow 1px solid; */
  width: 800px;
  float: left;
  margin-left: 50px;
}
.my-reply {
  width: 800px;
}

.right {
  /* border: solid 1px red; */
  width: 548px;
  height: 1200px;
  float: left;
}
.el-button {
  margin-top: 20px;
}
</style>
